<script setup lang="ts">
import {nextTick, ref} from 'vue'
import {EmployeeC} from '@/types/employeeC'
import {Employee} from '@/types/employee'
import {getEmployee, saveEmployee, updateEmployee} from '@/api/employee'
import {ElMessage, FormInstance} from 'element-plus'

const visible = ref(false)
const dataFormRef = ref<FormInstance>()
const dataForm = ref<Employee>(new EmployeeC())

const dataRule = ref({
  socialSecurityNumber: [{
    required: true,
    message: '身份证号不能为空',
    trigger: 'blur',
  }],
  employeeName: [{
    required: true,
    message: '姓名不能为空',
    trigger: 'blur',
  }],
  age: [{
    required: true,
    message: '年龄不能为空',
    trigger: 'blur',
  }],
  phone: [{
    required: true,
    message: '电话号码不能为空',
    trigger: 'blur',
  }],
  position: [{
    required: true,
    message: '职位不能为空',
    trigger: 'blur',
  }],
  workPlace: [{
    required: true,
    message: '工作地点不能为空',
    trigger: 'blur',
  }],
})

function init(id: number) {
  visible.value = true
  nextTick(async () => {
    if (id) {
      dataForm.value = await getEmployee(id)
    } else {
      dataFormRef.value.resetFields()
    }
  })
}

const emits = defineEmits(['refreshDataList'])

// 表单提交
async function dataFormSubmit() {
  console.log('save employee: ', dataForm.value)
  if (dataForm.value.id) {
    await updateEmployee(dataForm.value)
  } else {
    await saveEmployee(dataForm.value)
  }
  visible.value = false
  emits('refreshDataList')
  ElMessage({
    type: 'success',
    message: '操作成功',
    duration: 1000
  })
}

defineExpose({
  init,
})
</script>

<template>
  <el-dialog
    v-model="visible"
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRule"
      label-width="120px"
      @keyup.enter="dataFormSubmit()"
    >
      <el-form-item label="姓名" prop="employeeName">
        <el-input v-model="dataForm.employeeName" placeholder="姓名"/>
      </el-form-item>
      <el-form-item label="身份证号" prop="socialSecurityNumber">
        <el-input
          v-model="dataForm.socialSecurityNumber"
          placeholder="身份证号"
        />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="dataForm.sex">
          <el-radio :value="1">男</el-radio>
          <el-radio :value="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="dataForm.age" placeholder="年龄"/>
      </el-form-item>
      <el-form-item label="电话号码" prop="phone">
        <el-input v-model="dataForm.phone" placeholder="电话号码"/>
      </el-form-item>
      <el-form-item label="职位" prop="position">
        <el-input v-model="dataForm.position" placeholder="职位"/>
      </el-form-item>
      <el-form-item label="工作地点" prop="workPlace">
        <el-input
          v-model="dataForm.workPlace"
          placeholder="工作地点"
        />
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
